<template>
  <div class="grandSon">
    我是GrandSon
    {{ color }} -{{ userInfo.name }} -{{ userInfo.age }}
    <!-- 
        但是这里为什么就可以修改userInfo.name和age呢？
        而且也没有报错?
        AI回复：
        这种修改是可以生效的，因为 Vue 的响应式系统会检测到变化并更新视图。但这并不是一个好的实践，因为它破坏了单向数据流的原则。
    -->
    <!-- <button @click="change">修改数据</button> -->
  </div>
</template>

<script>
export default {
  inject: ["color", "userInfo"]

  // 测试是否可以在子组件中修改数据 => 不可以，还是会报错
  // methods: {
  //   change() {
  //     this.color = "red";
  //     console.log(this);
  //     this.userInfo.age += 1;
  //   }
  // }
};
</script>

<style>
.grandSon {
  border: 3px solid #000;
  border-radius: 6px;
  margin: 10px;
  height: 100px;
}
</style>